<template>
  <div class="headerComp">
    <van-nav-bar class="app-header">
    <template #left>
      <van-button
        type="primary"
        :text="cityS"
        icon="location"
        @click="show = true"
        class="cityLocation"
      />
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop>
          <div class="block">
            <div class="">
              <h3>选择城市</h3>
              <div class="selectCity">
                <span
                  v-for="item in citydata"
                  :key="item.id"
                  @click="selectCity(item)"
                  :class="item.clickStaus ? 'btnActive cityBtn' : 'cityBtn'"
                  >{{ item.cityNane }}</span
                >
              </div>
              <button class="choosecity" @click="choosecity()">确定</button>
              <p>更多城市敬请期待</p>
            </div>
          </div>
        </div>
      </van-overlay>
    </template>
    <template #title>
      <router-link to="/">返回首页</router-link>
    </template>
    <template #right>
      <!-- <router-link to="/login">登录</router-link> -->
      <router-link to="/user">我的</router-link>
    </template>
  </van-nav-bar>
  </div>
  
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { Ref } from "vue";
import { Popover } from "vant";
import { Toast } from "vant";
import { useRouter } from "vue-router";

let show = ref(false);
const router = useRouter()
const cityS = ref("城市");
const showPopover = ref(false);
const actions = [{ text: "个人中心" }, { text: "购物车" }];

const citydata: Ref<any> = ref([
  {
    cityNane: "武汉市",
    id: 1,
    clickStaus: false,
  },
  {
    cityNane: "北京市",
    id: 2,
    clickStaus: false,
  },
  {
    cityNane: "上海市",
    id: 3,
    clickStaus: false,
  },
]);

const selectCity = (item: any) => {
  if (!item.clickStaus) {
    citydata.value.forEach((item1: any, index: any) => {
      item1.clickStaus = item1.id == item.id ? true : false;
      if (item1.id == item.id) {
        cityS.value = item1.cityNane;
      }
    });
  }
};
const choosecity = () => {
  show.value = false;
};
</script>

<style lang="scss" scoped>
#headerComp{
  height: 90px;
}
.app-header {
  background-color: white;
  ::v-deep .van-nav-bar__content {
    font-weight: bold;
    .van-nav-bar__left,
    .van-nav-bar__right {
      a {
        color: gray;
      }
    }
    .van-nav-bar__title {
      height: 50.002px;
      line-height: 50px;
      background-color: #fff;
      border-radius: 60px;
      text-align: left;
      padding-left: 20px;
      font-size: 14px;
      a {
        color: #222;
      }
    }
  }
}
.van-button--primary {
  background: white;
  color: gray;
  border: 0px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .selectCity{
    display: flex;
    justify-content: space-around;
    height: 80px;
    span{
      border: 1px solid gray;
      padding: 10px;
      font-size: 12px;
    }
  }
}

.block {
  width: 500px;
  height: 400px;
  background-color: #fff;
  .cityBtn {
    color: #442719;
    font-size: 0.22rem;
    text-align: center;
    display: block;
    background-color: #f7f7f5;
    border: 1px solid #f7f7f5;
    height: 28px;
    line-height: 30px;
    position: relative;
  }
  .btnActive {
    color: red;
  }
}
</style>
